<template>
  <van-popup
    v-model="searchshow"
    class="allshow searchshow"
    position="bottom"
    :style="{ height: '85%',background:'#090A1B' }"
  >
    <van-search
      v-model="valuesearch"
      :placeholder="$t('common.sousuo')"
      class="search"
      style=""
      :clearable="false"
    />
    <van-tabs animated swipeable v-model="activesearch">
      <van-tab :title="item" v-for="(item, ind) in searchtab" :key="ind">
        <div class="setabtop">
          <p>{{ $t("common.mingcheng") }}</p>
          <div class="setabtop_right">
            <div @click="btn1" style="display: flex">
              <p>{{ $t("common.zuixinjia") }}</p>

              <img src="../assets/images/jjh.png" alt="" v-if="order1 == 1" />
              <img
                src="../assets/images/jjh1.png"
                alt=""
                v-else-if="order1 == 2"
              />
              <img src="../assets/images/jjh2.png" alt="" v-else />
            </div>
            <p>/</p>
            <div @click="btn2" style="display: flex">
              <p>{{ $t("common.zhangdie") }}</p>

              <img src="../assets/images/jjh.png" alt="" v-if="order2 == 1" />
              <img
                src="../assets/images/jjh1.png"
                alt=""
                v-else-if="order2 == 2"
              />
              <img src="../assets/images/jjh2.png" alt="" v-else />
            </div>
          </div>
        </div>
        <div class="setabbottom" v-if="activesearch == 0">
          <div
            v-for="item in myOSList"
            :key="item.symbolId"
            class="setabone"
            @click="chooseSymbolItem(item.symbolId,item.symbolName)"
          >
          <div class="iib">
          <img :src="item.logoImg" alt="" class="baiimg"/>
            <div class="setabonefront">
              <p>{{ item.symbolName }}</p>
              <p><img src="../assets/images/star.png" alt="" />{{ $t("common.yongxu") }}</p>
            </div>
        </div>
            <div :class="+item.riseAndFallRange > 0 ? 'green' : 'red'">
              <p>{{ item.lastPrice }}</p>
              <p>{{ item.riseAndFallRange }}%</p>
            </div>
          </div>
        </div>
        <div class="setabbottom" v-else>
          <div
            v-for="item in allOSList"
            :key="item.symbolId"
            class="setabone"
            @click="chooseSymbolItem(item.symbolId,item.symbolName)"
          >
          <div class="iib">
          <img :src="item.logoImg" alt="" class="baiimg"/>
            <div class="setabonefront">
              <p>{{ item.symbolName }}</p>
              <p><img v-show="item.isOptional" src="../assets/images/star.png" alt="" />{{ $t("common.yongxu") }}</p>
            </div>
        </div>
            <div :class="+item.riseAndFallRange > 0 ? 'green' : 'red'">
              <p>{{ item.lastPrice }}</p>
              <p>{{ item.riseAndFallRange }}%</p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
        searchshow:false,
      oldOSList: [],
      myOSList: [],
      allOSList: [],
      order1: 1,
      zindex:  1,
      order2: 1,
      activesearch: 0,
      searchtab: [this.$t("common.zixuan"), this.$t("common.quanbu")],
      valuesearch: "",
    };
  },
  created() {
    this.zindex = 1
    this.getOptionSymbolList();
  },
  watch: {
    valuesearch(val) {
      console.log(val);
      if (this.activesearch == 0) {
        this.myOSList = this.oldOSList.filter((v) =>
          v.symbolName.includes(val.toUpperCase())
        );
      } else {
        this.allOSList = this.oldOSList.filter((v) =>
          v.symbolName.includes(val.toUpperCase())
        );
      }
    },
    // 币对列表 自选  全部
    activesearch(val) {
      this.valuesearch = "";
      this.getOptionSymbolList();
    },
  },
  methods: {
    chooseSymbolItem(id,name) {
      localStorage.setItem("chooseSymbolId", id);
      this.$emit('chooseSymbolItem',{
        id,name
      })
      this.searchshow = false;
    },
    async getOptionSymbolList() {
      this.valuesearch = "";
      const ret = await this.$http({
        url: "/contract/contractOptionalSymbol/list",
        method: "post",
        data: {
          orderName: 0, //名称排序 0 升序 1 降序  null 不排序
          orderSumPrice: null, //成交量排序 0 升序 1 降序  null 不排序
          orderLastPrice: this.order1 == 1 ? null : this.order1 == 2 ? 1 : 0, //最新价排序 0 升序 1 降序  null 不排序
          orderRiseAndFallRange:
            this.order2 == 1 ? null : this.order2 == 2 ? 1 : 0, //涨跌幅排序 0 升序 1 降序  null 不排序
          type: this.activesearch == 0 ? 'optional' : 'all', //查询类型  是否查询当前登陆人所选的币对 ，false -> 查全部
        },
      });
      if (ret.data.code === 0) {
        this.oldOSList = ret.data.data;
        if (this.activesearch == 0) {
          this.myOSList = ret.data.data;
        } else {
          this.allOSList = ret.data.data;
        }
        if(this.zindex == 1 && !this.myOSList.length){
            this.zindex = 2
            this.activesearch = 1
        }
      }
    },
    btn1() {
      if (this.order1 == 1) {
        this.order1 = 2;
      } else if (this.order1 == 2) {
        this.order1 = 3;
      } else {
        this.order1 = 1;
      }
      this.order2 = 1;
      this.getOptionSymbolList();
    },
    btn2() {
      if (this.order2 == 1) {
        this.order2 = 2;
      } else if (this.order2 == 2) {
        this.order2 = 3;
      } else {
        this.order2 = 1;
      }
      this.order1 = 1;
      this.getOptionSymbolList();
    },
  },
};
</script>

<style lang="scss" scoped>
.searchshow {
  .search {
    margin-top: 7vw;
    // margin-left: 3.2vw;
    height: 9.6vw;
    background: #090A1B;

    .van-search__content {
      background-color: rgba(45, 47, 59, 100) !important;
      // left: 3.2vw !important;
      position: relative !important;
      padding-right: 0.8vw !important;
    }

    ::v-deep .van-field__left-icon {
      margin-right: 2.5vw !important;
      width: 4.8vw !important;
      height: 4.8vw !important;
      color: rgba(135, 139, 151, 100);
    }

    ::v-deep .van-icon {
      margin-right: 2.5vw !important;
      width: 4.8vw !important;
      height: 4.8vw !important;
      color: rgba(135, 139, 151, 100);
    }

    .van-search {
      width: 93.6vw;
      height: 9.6vw;
      border-radius: 1.3vw !important;
      background: #090A1B;
      position: sticky;
      top: 0;
      padding: 0 4vw 0 0 !important;
    }

    ::v-deep .van-cell {
      background: rgba(45, 47, 59, 100) !important;
    }

    ::v-deep .van-field__control {
      color: #fff !important;
    }
  }

  ::v-deep .van-tabs {
    margin-top: 5vw;
    color: #8992AE;

    .van-tabs__wrap {
      width: 60vw;
      height: 7.4vw;
    }

    .van-tabs__nav--line {
      background-color: #090A1B;
      height: auto;
      width: 35vw;
    }

    .van-tab--active {
      color: #fff;
    }

    .van-tabs__line {
      width: 5.3vw;
      // height: 0vw;
      margin-right: 2vw;
      background-color: #0a7aff;
      bottom: 1.6vw;
    }

    // .van-tab--active{
    //   background: #0a7aff;
    // }
    .van-tab {
      border-radius: 5px;
      padding: 0 !important;
    }

    .van-tabs__content {
      border-top: 0.4vw solid rgba(45, 47, 59, 100);
      // padding: 3vw;
      margin-bottom: 50px;

      .van-tab__pane-wrapper {
        box-sizing: border-box;
        padding: 3vw;
      }

      .setabtop {
        display: flex;
        justify-content: space-between;

        > p {
          margin-left: 4.2vw;
        }

        .setabtop_right {
          display: flex;
          align-items: flex-start;

          p {
            margin-left: 1vw;
          }

          img {
            width: 3.2vw;
          }
        }
      }

      .setabbottom {
        margin-top: 4vw;

        .setabone {
          display: flex;
          justify-content: space-between;
          padding: 0 2vw;
          margin-bottom: 3.7vw;
          position: relative;

          > div {
            text-align: right;

            > p:first-child {
              font-size: 3.6vw;
              margin-bottom: 1vw;
            }
          }

          .setabonefront {
            text-align: left;

            > p:first-child {
              color: #fff;
              margin-bottom:2px;
            }

            > p {
              color: #8992AE;
            }
          }

          img {
            width: 3.7vw;
            position: relative;
          top:2px;
          }
        }
      }
    }
  }

  .dropwai {
    height: 0px;
    z-index: 2;
    position: relative;

    .drop {
      width: 93.6vw;
      height: 86vw;
      // background-color: #fff;
      background-color: #171A2B;
      margin: 0 3.2vw;
      overflow-y: auto;
      box-sizing: border-box;
      transition: 0.2s linear;

      .setabone {
        display: flex;
        justify-content: space-between;
        margin-bottom: 3.7vw;
        position: relative;

        > div {
          text-align: right;

          > p:first-child {
            font-size: 3.6vw;
            margin-bottom: 1vw;
          }
        }

        .setabonefront {
          text-align: left;

          > p:first-child {
            color: #fff;
            margin-bottom:2px;
          }

          > p {
            color: #8992AE;
          }
        }

        img {
          width: 3.7vw;
          position: relative;
          top:2px;
        }
      }
    }
  }
}
.red {
    color: #e45360 !important;
  }

  .green {
    color: #5eba89 !important;
  }
  .baiimg{
    width:24px !important;
    height:24px !important;
    border-radius: 50%;
    margin-right:10px;
  }
  .iib{
    display: flex;
  }
</style>